<template>
    <div>
        <myheader></myheader>

        <Breadcrumb :datas="datas"></Breadcrumb>
        
        
        <br><br>

        <h3>添加商品分类</h3>

        <section class="featured-block text-center">
		<div class="container">

        
        

        <div>
            商品种类名称:<input type="text" v-model="cname">
        </div>

        <br><br>

        <Button style="color:blue" @click="submit">提交</Button>


        <br><br><br>
        

        <table border="1" width="200" height="100">
            <tr>
                <th>
                    序号
                </th>
                <th>
                    名称
                </th>
                <th>
                    操作
                </th>
            </tr>
            <tr v-for="(item,index) in clist" :key='index'>
                <td>{{ item.id }}</td>
                <td>{{ item.cname }}</td>
                <td><Button @click="del(item.id)">删除</Button> <router-link :to="{name:'mycatedel',query:{'cid':item.id}}"><Button>编辑</Button></router-link></td>
                
            </tr>
        </table>



        </div>
	    </section>

        <myfooter ></myfooter>
    </div>
</template>




<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
    data(){
        return{
             //面包屑导航
	        datas:[{title:'首页',route:{path:'/'}},{title:'分类添加'}],
            cname:'',
            clist:[],

        }
    },


//定义组件
components:{
	'myheader':myheader,
	'myfooter':myfooter,
},

mounted:function(){
    //获取分类
    this.catelist()

},






methods:{
    //修改
    
    

    //删除
    del:function(cid){
        this.axios.delete('http://localhost:8000/addcate/',{cid:cid}).then((res)=>{
            console.log(res)
            this.clist = res.data.message
            this.$router.go(0)
            
        }) 
    },


    //展示
    catelist:function(){
        this.axios.get('http://localhost:8000/addcate/').then((res)=>{
            console.log(res)
            this.clist = res.data.message

        })     
    },


    //添加
    submit:function(){
        this.axios.post('http://localhost:8000/addcate/',{cname:this.cname}).then((res)=>{
            console.log(res)
            this.$Message(res.data.message)




        // this.axios({
        //     url:'http://localhost:8000/addcate/',
        //     method:'post',
        //     data:{canem:this.cname}

        // }).then((res)=>{
        //     console.log(res)
        })
    }


}




}
</script>